@import '~ng-devui/styles-var/devui-var.scss';

@mixin font-title($font-size: $devui-font-size-page-title) {
  font-size: $font-size;
  font-weight: $devui-font-title-weight;
  line-height: $devui-line-height-base;
}

@mixin font-content() {
  font-size: $devui-font-size;
  font-weight: $devui-font-content-weight;
  line-height: $devui-line-height-base;
}

//内容区布局样式
.devui-content-layout {
  top: 60px;
  position: absolute;
  padding: 0 15vw 0 25vw;
  width: calc(100vw - 20px);
  background-color: $devui-global-bg;
}

//内容区文档头样式
.devui-docs-header {
  h1 {
    margin: 32px 0 24px 0;
    @include font-title($devui-font-size-data-overview);
  }

  h3 {
    @include font-title($devui-font-size-card-title);
  }
}

//内容区文档卡片样式
.devui-content-card {
  margin-top: 12px;
  padding: 20px 20px 32px 20px;
  background-color: $devui-base-bg;
}

//demo及代码样式
.devui-demo-container {
  position: relative;
  margin-top: 20px;
}

.devui-demo-example {
  margin-bottom: 20px;
  padding: 20px;
  background-color: $devui-base-bg;
  box-shadow: $devui-shadow-length-base $devui-light-shadow;
  border-radius: 8px;
}

.devui-demo-title {
  @include font-title($devui-font-size-page-title);

  color: $devui-text;
  margin-bottom: 12px;
  height: 24px;
  display: flex;
  align-items: center;
}

.devui-demo-text {
  @include font-content();

  color: $devui-text;
}

.devui-code-box {
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 4px 0;
  transition: all 0.2s;
}

.devui-code-copy {
  fill: $devui-text;
}

.devui-code-box-demo {
  border-bottom: 1px dashed $devui-dividing-line;
  padding: 16px 0;
}

.devui-code-box-meta.markdown {
  position: relative;
  padding: 10px 40px;
  border-radius: 0 0 4px 4px;
  transition: background-color 0.4s;
  width: 100%;
  font-size: $devui-font-size;
  margin-bottom: 0;
}

.devui-code-box.expand .devui-code-box-meta {
  border-radius: 0;
  // border-bottom: 1px dashed $devui-dividing-line;
}

.devui-code-box .devui-highlight-wrapper {
  display: none;
  overflow: auto;
  border-radius: 0 0 4px 4px;
}

.devui-code-box .devui-highlight-wrapper-expand {
  display: block;
}

.devui-code-box pre {
  width: auto;
  margin: 10px 0 0;
}

.devui-code-box .collapse,
.devui-code-box .code-link {
  display: block; /* .collapse conflick with bootstrap */
  position: absolute;
  left: 20px;
  // top: -9px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  line-height: 16px;
  opacity: 0.55;
  text-align: center;
  transition: all 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  & > svg > path {
    fill: $devui-text;
  }
}

.devui-code-box .code-link:hover {
  transform: scale(1.2);
}

.devui-new-code-copy {
  margin-left: 10px;
}

.devui-code-box.expand .collapse {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

//内容区导航样式
.devui-content-nav {
  width: 240px;
  position: fixed;
  top: 170px;
  right: 0;
  height: 100%;
  z-index: calc(#{$devui-z-index-framework} + 1);

  .devui-fast-forward {
    width: 130px;
    font-size: $devui-font-size-card-title;
    color: $devui-text;
    line-height: 24px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-left: 20px;
    border-bottom: 1px solid $devui-dividing-line;
  }

  .devui-step-nav {
    margin-top: 10px;

    & > li {
      list-style: none;
      padding-left: 20px;
      cursor: pointer;
      height: 30px;
      line-height: 30px;
      font-size: $devui-font-size;
      color: $devui-text;
      position: relative;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      a {
        display: block;
        width: 110px;
        overflow: hidden;
        color: $devui-text;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
      }

      a.current {
        color: $devui-link;
      }

      &.active {
        color: $devui-link;
        &:not(.open) {
          font-weight: 600;
        }
      }
      &:not(.disabled):hover {
        color: $devui-link;
      }
    }
  }
}

@media (max-width: 1800px) {
  .devui-content-nav {
    width: 150px;
  }
}

@media (max-width: 1250px) {
  .devui-content-nav {
    display: none;
  }
}

@media (max-width: 1024px) {
  .devui-content-layout {
    width: 100%;
    margin-left: 0;
    transition: all 0.2s ease-out;
  }
}

// 设置引导页MarkDown文档标题
.readme {
  h1 {
    @include font-title($devui-font-size-data-overview);
    padding: 40px 0 20px;
  }
  h2 {
    @include font-title($devui-font-size-page-title);
    padding: 40px 0 15px;
  }
  h3 {
    @include font-title($devui-font-size-card-title);
    padding: 30px 0 10px;
  }
  h1,
  h2,
  h3 {
    // font-weight: normal;
    margin: 0;
  }
  pre code {
    padding: 0.5em;
  }
}
// 引导页页面样式设置
.readme {
  .hljs {
    background: transparent;
  }
  pre {
    background-color: $devui-base-bg;
    border: none;
    code {
      border: 1px solid $devui-dividing-line;
      overflow-x: auto;
    }
  }
  p {
    margin: 1em 0;
  }
}
// API页MarkDown文档标题样式
.markdown h1 {
  font-size: $devui-font-size-price;
}
.markdown h2 {
  font-size: $devui-font-size-page-title;
}
.markdown h3 {
  font-size: $devui-font-size-card-title;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: $devui-text;
  margin: 1.6em 0 0.6em;
  font-weight: bold;
  clear: both;
}
// API页MarkDown文档正文样式
.markdown {
  color: $devui-text;
  font-size: $devui-font-size-lg;
  line-height: 1.8;
  a {
    color: $devui-link;
    &:hover {
      color: $devui-link-active;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
// 使用Card组件对demo进行封装
.devui-demo-card-wrapper {
  .devui-demo-example {
    margin-bottom: 0px;
  }
  cursor: pointer;
  transition: box-shadow $devui-animation-duration-slow $devui-animation-ease-in-out-smooth,
    transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
  &:hover {
    box-shadow: $devui-shadow-length-hover $devui-light-shadow;
    // transform: translateY(-5px);
  }
  margin-bottom: 40px;
}

// MarkDown文档代码复制按钮样式
.d-md-pre-copy {
  position: absolute;
  top: 10px;
  right: 12px;
  text-align: right;
  cursor: pointer;
}
